<template>
  <div class="container">
  <el-card class="box-card">
  <el-descriptions title="订单信息">
  <el-descriptions-item label="订单类型">{{ form.orderType }}</el-descriptions-item>
  <el-descriptions-item label="订单金额">{{ form.payMoney }}</el-descriptions-item>
  <el-descriptions-item label="订单状态">
  <el-tag size="small">{{ form.status }}</el-tag>
  <el-button type="primary" size="small" style="margin-left:20px" @click="dialogVisible = true">修改状态</el-button>
  </el-descriptions-item>
  <el-descriptions-item label="起点" v-if="form.startAddress">{{ form.startAddress }}</el-descriptions-item>
  <el-descriptions-item label="目的地">{{ form.endAddress }}</el-descriptions-item>
  <template v-for="item in orderInfo">
  <el-descriptions-item v-if="item.key === '图片'" :label="item.key">
  <el-image style="width: 30px; height: 30px" :src="item.value" :preview-src-list="[item.value]">
  </el-image>
  </el-descriptions-item>
  <el-descriptions-item v-else-if="item.key === '打印附件'" :label="item.key">
  <el-link type="primary" v-for="(file,i) in item.value" :key="file" :href="file" target="_blank">附件{{ i + 1
  }}</el-link>
  </el-descriptions-item>
  <el-descriptions-item v-else :label="item.key">{{ item.value }}</el-descriptions-item>
  </template>
  </el-descriptions>
  </el-card>
  <div class="personInfo">
  <el-card class="box-card">
  <el-descriptions class="margin-top" title="发单人" :column="2" border>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-user"></i>
  昵称
  </template> 
  {{ form.userInfo?form.userInfo.nickName:'' }}
  </el-descriptions-item>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-mobile-phone"></i>
  手机号
  </template>
  {{ form.userInfo?(form.userInfo.phone?form.userInfo.phone:'未填写手机号'):'未填写手机号' }}
  </el-descriptions-item>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-location-outline"></i>
  发单时间
  </template>
  {{ form.publicTime }}
  </el-descriptions-item>
  </el-descriptions>
  </el-card>
  <el-card class="box-card">
  <el-descriptions class="margin-top" title="接单人" :column="2" border v-if="form.acceptMan">
  <template>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-user"></i>
  昵称
  </template>
  {{ form.acceptManInfo[0].nickName }}
  </el-descriptions-item>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-mobile-phone"></i>
  手机号
  </template>
  {{ form.acceptManInfo[0].phone?form.acceptManInfo[0].phone:'未填写手机号' }}
  </el-descriptions-item>
  <el-descriptions-item>
  <template slot="label">
  <i class="el-icon-location-outline"></i>
  发单时间
  </template>
  {{ form.acceptTime }}
  </el-descriptions-item>
  </template>
  </el-descriptions>
  <div style="margin-top:50px;color:#c8c8c8;" v-else>
  暂时无人接单
  </div>
  </el-card>
  </div>
  <el-dialog title="修改订单状态" :visible.sync="dialogVisible" width="30%">
  <el-select v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
  </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible = false">取消</el-button>
  <el-button type="primary" @click="updateStatus">确定</el-button>
  </span>
  </el-dialog>
  </div>
</template>
<script>
import { formatOrderInfo } from "../utils/util";
export default {
  data() {
    return {
      form: {},
      orderInfo: "",

      _id: "",
      dialogVisible: false,
      options: [
        {
          value: "待帮助",
          label: "待帮助",
        },
        {
          value: "已帮助",
          lable: "已帮助",
        },
        {
          value: "已完成",
          lable: "已完成",
        },
        {
          value: "已关闭",
          label: "已关闭",
        },
      ],
      value: "",
    };
  },
  created() {
    const { _id } = this.$route.params;
    this._id = _id;
    this.getOrderDetail(_id);
  },
  methods: {
    getOrderDetail(id) {
      this.$http
        .get("/orderDetail", {
          params: {
            id,
          },
        })
        .then((res) => {
          // console.log(res)
          if (res.data.status === "success") {
            this.form = res.data.result[0];
            this.orderInfo = formatOrderInfo(res.data.result[0]);
          } else {
            this.$message.error("读取错误");
            this.$router.push({
              name: "Order",
            });
          }
        })
        .catch((err) => {
          this.$message.error("读取错误");
          this.$router.push({
            name: "Order",
          });
        });
    },
    updateStatus() {
      //判断是否选择订单状态value
      if (this.value) {
        this.dialogVisible = false;
        this.$http
          .post("/updateOrder", {
            id: this._id,
            status: this.value,
          })
          .then((res) => {
            if (res.data == "success") {
              this.$message.success("修改成功");
              this.getOrderDetail(this._id);
            } else {
              this.$message.error("服务器错误");
            }
          })
          .catch((err) => {
            console.log(error);
            this.$message.error("服务器错误");
          });
      } else {
        this.$message.error("请选择订单状态");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  .personInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .box-card {
      width: 49%;
    }
  }
}
</style>